
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
    body{
      font:18px "Microsoft YaHei UI";
      margin: 0;
      background-color: #fafafa;
    }
    header a{
      text-decoration: none;
      color: #6c6c6c;
    }
    header a:hover{
      color: #0aa1ed;
    }
    .el-input__inner {
        padding-right:35px;
    }

    .el-table .el-table__cell{
        padding:6px 0;
    }
    /*图片添加阴影*/
    .item_div>img:hover{
        position: relative;
        bottom:5px;
        /*元素阴影 x偏移值  y偏移值 浓度 范围 颜色*/
        box-shadow:0 0 12px 5px #333;
    }
  </style>
</head>
<body>
<div id="app">
<el-container>
  <el-header>
    <div style="width: 1200px;margin: 0 auto">
      <img src="imgs/logo.png" style="width: 300px;vertical-align: middle" alt="">
      <span style="margin-left: 50px">
        <a href="" style="color: #0aa1ed">首页</a><el-divdier direction="vertical"></el-divdier>
        <a href="">热点资讯</a><el-divdier direction="vertical"></el-divdier>
        <a href="">社会招聘</a><el-divdier direction="vertical"></el-divdier>
        <a href="">校园招聘</a><el-divdier direction="vertical"></el-divdier>
        <a href="">帮助中心</a>
      </span>
    </div>
    <!--蓝条开始-->
    <div style="width: 100%;height:60px;background-color: #82c8ec">
      <el-menu style="width: 1200px;margin: 0 auto"
              default-active="1"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
              background-color="#82c8ec"
              text-color="#fff"
              active-text-color="#fff">
          <el-menu-item index="1">当季女装</el-menu-item>
          <el-menu-item index="2">精彩活动</el-menu-item>
          <el-menu-item index="3">品牌男装</el-menu-item>
          <el-menu-item index="4">环球美食</el-menu-item>
          <el-menu-item index="5">医药健康</el-menu-item>
          <el-menu-item index="6">美妆彩妆</el-menu-item>
          <el-menu-item index="7">母婴产品</el-menu-item>
        <el-menu-item>
          <el-input     size="mini" v-model="wd" placeholder="请输入关键字搜素"></el-input>
        </el-menu-item>
          <el-button style="background-color: rgba(0,0,0,0);border: none; position:relative;top:13px;right: 70px"  icon="el-icon-search"></el-button>
      </el-menu>
    </div>
    <!--蓝条结束-->
  </el-header>
  <el-main style="width: 1200px;margin: 100px  auto 0 auto">
      <el-row :gutter="20">
          <el-col :span="18">
          <!--走马灯开始-->
          <el-carousel trigger="click" height="300px">
              <el-carousel-item v-for="item in arr" :key="item">
                  <img :src="item" style="width: 100% ;height:100%" alt="">
              </el-carousel-item>
          </el-carousel>
          <!--走马灯结束-->
          </el-col>
          <el-col :span="6">
              <el-card style="width: 400px">
                  <h3><i  style="font-weight: bold;"    class="el-icon-trophy"></i>销量最高</h3>
                  <!--销量排行榜开始-->
                  <el-table :data="itemArr" style="width: 500px ">
                      <!--type-"index" 列的内容为序号-->
                      <el-table-column  width="80px" type="index" label="排名" >
                      </el-table-column>
                      <el-table-column prop="name" label="商品名" >
                      </el-table-column>
                      <el-table-column prop="count" label="销量">
                      </el-table-column>
                  </el-table>
                  <!--销量排行榜结束-->
                  <el-divdier></el-divdier>
              </el-card>
          </el-col>
      </el-row>
      <!--商品列表开始-->
      <el-row :gutter="20">
          <el-col :span="6" v-for="i in mainArr">
              <el-card :body-style="{ padding: '15px' }">
                  <div class="item_div">
                      <img :src="i.url" width="100%" class="image">
                  </div>

                  <div style="padding: 14px;">
                      <p style="margin-top:0">{{i.name}}</p>
                      <div class="bottom clearfix"style="color: black">
                       <span>￥{{i.price}}<small style="text-decoration: line-through">￥{{i.oldPrice}} </small></span>
                      <span style="float: right">销量:{{i.count}}件</span>
                      </div>
                  </div>
              </el-card>
          </el-col>
      </el-row>
      <!--商品列表结束-->
  </el-main>
  <el-footer>
      <div style="background-image:url('imgs/wave.png');height: 95px;
      margin-bottom;"></div>
      <div style="background-color: #3f3f3f;padding: 30px;text-align:center;color: #b1b1b1;
font-size: 14px;height: 100px">
          <p>日本动漫- 国产动漫- 欧美动漫- 动漫电影- 反馈留言- RSS- Sitemap</p>
          <p>本站的动漫由网络第三方视频类网站收集，本站不提供任何视听上传服务，所有内容均来自视频分享站点所提供的公开引用资源。</p>
          <p>Copyright © 2016-2020. All Rights Reserved.</p>
      </div>
  </el-footer>
</el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  new Vue({
    el: '#app',
    data: function() {
      return {
          wd:"",
          arr:["imgs/b1.jpg","imgs/b2.jpg","imgs/b3.jpg","imgs/b4.jpg"],
          itemArr:[{name:"拉布拉多1号",count:850},
                   {name:"拉布拉多2号",count:850},
                   {name:"拉布拉多3号",count:850},
                   {name:"拉布拉多4号",count:850},
                   {name:"拉布拉多5号",count:850}],
          mainArr:[{name:"拉布拉多5号",price:"239",oldPrice:"399",url:"imgs/a.jpg",count:"190"},
              {name:"拉布拉多1号",price:"239",oldPrice:"399",url:"imgs/g.jpg",count:"190"},
              {name:"拉布拉多1号",price:"239",oldPrice:"399",url:"imgs/b.jpg",count:"190"},
              {name:"拉布拉多1号",price:"239",oldPrice:"399",url:"imgs/h.jpg",count:"190"},
              {name:"拉布拉多1号",price:"239",oldPrice:"399",url:"imgs/i.jpg",count:"190"},
              {name:"拉布拉多3号",price:"239",oldPrice:"399",url:"imgs/j.jpg",count:"190"},
              {name:"拉布拉多3号",price:"239",oldPrice:"399",url:"imgs/k.jpg",count:"190"},
              {name:"拉布拉多3号",price:"239",oldPrice:"399",url:"imgs/c.jpg",count:"190"},
              {name:"拉布拉多4号",price:"239",oldPrice:"399",url:"imgs/d.jpg",count:"190"},
              {name:"拉布拉多4号",price:"239",oldPrice:"399",url:"imgs/e.jpg",count:"190"},
              {name:"拉布拉多4号",price:"239",oldPrice:"399",url:"imgs/f.jpg",count:"190"},
              {name:"拉布拉多5号",price:"239",oldPrice:"399",url:"imgs/g.jpg",count:"190"},]
      }
    },
    methods:{
      handleSelect(){

      }
    }
  })
</script>
</html>


